<template>
  <div class="leftside">

    <div class="logo" v-show="!isCollapse">
      <img src="@/assets/img/logo.png" />
    </div>
    
    <!-- v-bind:class="{ active: isCollapse }"不知道什么意思 -->
    <div class="icon">
      <i
        class="el-icon-s-unfold"
        v-bind:class="{ active: isCollapse }"
        @click="iconClick"
      ></i>
    </div>

    <!-- 第二种方法 -->
    <!-- :class="{ 'myMenu': isActive }" -->
    <!-- @select="handleSelect" -->
    <!-- 利用select事件函数传递path值，使用this.$router.push()进行路由跳转
         这样就可以实现路由跳转了key就是你每次点击菜单传过来index的属性值
    说明一下这个方法我在<el-menu>的属性里没有加router属性，还有就是<el-menu-item>里的index属性要写上你将要跳转的路由地址 -->
    <!-- 这两种方法可以根据需求来选择，如果你跳到下个页面需要传值，那就用第一种方法 -->
    <!--router     默认true 这样就很方便，只要你<el-menu-item>里的index属性值正确就可以直接跳转了，不用再写js方法了 -->
    <!-- :unique-opened="true"//设置展开时只保持有一个子菜单展开的设置: -->
    <el-menu
      :default-active="activeIndex"
      class="el-menu-vertical-demo"
      background-color="#262626"
      text-color="#B8DEFF"
      active-text-color="#FFFFFF"
      :unique-opened="true"
      :collapse="isCollapse"
      @open="handleOpen"
      @close="handleClose"
      router
    >
      <el-menu-item
        v-for="item in menu"
        v-show="item.parentId == '0' && item.type == 'menu'"
        :key="item.id"
        :index="'/' + item.resKey"
        class="index"
      >
        <img v-bind:src="item.icon" />
        <span>{{ item.resName }}</span>
      </el-menu-item>

      <el-submenu
        v-for="item in menu"
        :key="item.resName"
        :index="String(item.id)"
        v-show="item.parentId == '0' && item.type == 'nav'"
      >
        <template slot="title">
          <img v-bind:src="item.icon" />
          <span>{{ item.resName }}</span>
        </template>

        <el-menu-item
          v-for="i in item.children"
          :key="i.id"
          :index="'/' + i.resKey"
          style="background: transparent"
          ><span>{{ i.resName }}</span></el-menu-item
        >
      </el-submenu>

    </el-menu>
  </div>
</template>
<script>
import imgmap from "../assets/js/imgmap";
export default {
  name: "menus",
  data() {
    return {
      activeIndex: this.$route.path,
      menu: [],
      isCollapse: false,// 菜单默认展开
    };
  },
  watch: {
    //监听路由
    $route() {
      this.activeIndex = this.$route.path;
    },
  },
  methods: {
    handleOpen(key, keyPath) {},
    handleClose(key, keyPath) {},
    iconClick() {
      this.isCollapse = !this.isCollapse;
    },
  },
  created() {
    this.menu = JSON.parse(sessionStorage.getItem("menu"));
    this.menu = imgmap.getImgList(this.menu);
  },
  mounted() {},
};
</script>
<style scoped>
.logo {
  padding: 20px;
  box-sizing: border-box;
}
 .logo img {
  width: 190px;
}
/* 没起什么作用 */
.el-menu {
  border-right: 0;
  background: #040d1c !important;
}
.el-submenu {
  background: transparent;
}
.el-submenu img {
  width: 23px;
  margin-right: 16px;
}
.index {
  font-size: 16px;
  color: #b8deff !important;
  background-color: #040d1c !important;
}
.el-menu > .el-menu-item img {
  margin-right: 20px;
}
.el-submenu span {
  font-size: 16px;
  color: #b8deff;
}

/* 没起什么作用 */
.el-submenu /deep/ .el-menu-item {
  font-size: 14px;
  color: #b8deff !important;
  padding-left: 60px !important;
}
.leftside {
  height: 100%;
  /* width: 33px; */
  background: #040d1c;
}

/* el-menu区域的背景色 */
.el-menu /deep/ .el-submenu__title {
  background-color: #040d1c !important;
}
/* 二级菜单的背景色 */
.el-menu /deep/ .el-submenu .el-menu-item {
  background-color: #040d1c !important;
}
/* 没起什么作用 */
.el-menu-item .el-submenu /deep/ .el-menu .el-menu--inline {
  background: transparent !important;
}

/* 没起什么作用 */
.el-menu-vertical-demo
  .el-menu
  /deep/
  .el-submenu.is-active
  .is-opened
  > .el-menu
  .el-menu--inline {
  background: transparent !important;
}


  /* 当node激活时样式  90度左向右渐变*/
 .el-menu /deep/ .el-menu-item.is-active {
  background: linear-gradient(90deg, #3053af, #021132) !important;
  color: #fff;
}
 .icon {
  height: 30px;
  line-height: 30px;
  font-size: 32px;
  padding-left: 15px;
  color: rgb(184, 222, 255);
  box-sizing: border-box;
  margin-bottom: 10px;
}
.active {
  transform: rotate(90deg);
  -ms-transform: rotate(90deg); /* IE 9 */
  -moz-transform: rotate(90deg); /* Firefox */
  -webkit-transform: rotate(90deg); /* Safari 和 Chrome */
  -o-transform: rotate(90deg); /* Opera */
}
</style>

<style>
/* 右边的小图标 靠最右边*/
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 264px;
}
</style>